<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构</title>
    <style>

         div{
              border: 1px solid;
         }
    </style>
</head>
<body>

<div id="container">

</div>

</body>
<script>

    /**
     *  对象或者模型
     *    对象
     *      属性
     *         hair
     *         hand
     *      行为
     *        say
     *
     *        rectangle
     *            属性
     *              width
     *              height
     *           行为
     *             getArea
     *                return width*height
     * */

    var container = document.getElementById('container');
    // container.innerHTML = '<div class="box">box1</div>';
    // container.innerHTML += '<div>box2</div>';

    var box1 = document.createElement('div');
    box1.innerText = 'box1';
    box1.className='box';

    var innerBox = document.createElement('div');
    innerBox.innerText = 'innerBox';

    var box2 = document.createElement('div');
    box2.innerText = 'box2';
    box2.className='box';

    box1.append(innerBox);
    container.append(box1);
    container.append(box2);


</script>


</html>